<template>
  <WsmTable
    ref="table"
    v-model="queryFormType"
    load-url="/dbms-server/base/app/page"
    :query-type="queryFormType"
    :change-load="true"
    :select="true"
  >
    <template #title>{{ t('dbms.microservices.title') }}</template>
    <template #query="{ data }">
      <el-form-item :label="t('dbms.microservices.appName')">
        <el-input v-model="data.appName.value" />
      </el-form-item>
      <el-form-item :label="t('dbms.microservices.appType')">
        <el-radio-group v-model="data.appType.value">
          <el-radio value="">{{ t('dbms.microservices.all') }}</el-radio>
          <el-radio value="0">{{ t('dbms.microservices.must') }}</el-radio>
          <el-radio value="1">{{ t('dbms.microservices.optional') }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </template>
    <template #button="{ row }">
      <el-button type="primary" v-hasPermi="'add'" @click="addForm.show()">{{
        t('common.add')
      }}</el-button>
      <el-button v-hasPermi="'update'" v-if="row" @click="update(row.appName)" type="success">{{
        t('common.update')
      }}</el-button>
      <el-button
        @click="del(row.appName)"
        v-if="row && row.appType == 1"
        v-hasPermi="'delete'"
        type="danger"
        >{{ t('common.delete') }}</el-button
      >
      <el-button @click="config(row.appName)" v-if="row" v-hasPermi="'config'" type="warning">{{
        t('dbms.microservices.configBtn')
      }}</el-button>
      <el-button
        v-if="row && row.jarFile == 1"
        v-hasPermi="'deploy'"
        type="primary"
        @click="addMicroservice(row.appName)"
        >{{ t('dbms.microservices.addApp') }}
      </el-button>
      <el-button v-if="row" v-hasPermi="'design'" type="danger" @click="design(row.appName)"
        >{{ t('dbms.microservices.designBtn') }}
      </el-button>
    </template>
    <template #column>
      <el-table-column prop="appType" :label="t('dbms.microservices.appType')" width="70">
        <template #default="scope">
          <template v-if="scope.row.appType === 0">
            <el-tag effect="dark" type="danger">{{ t('dbms.microservices.must') }}</el-tag>
          </template>
          <template v-else-if="scope.row.appType === 1">
            <el-tag effect="dark" type="success">{{ t('dbms.microservices.optional') }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="runIndex" :label="t('dbms.microservices.runIndex')" width="100" />
      <el-table-column prop="appName" :label="t('dbms.microservices.appName')" width="180" />
      <el-table-column prop="appNote" :label="t('dbms.microservices.appNote')" />
      <el-table-column prop="jarFile" :label="t('dbms.microservices.jarFile')" width="80">
        <template #default="scope">
          <template v-if="scope.row.jarFile == 0">
            <el-tag type="danger">{{ t('dbms.microservices.noFile') }}</el-tag>
          </template>
          <template v-else-if="scope.row.jarFile == 1">
            <el-tag type="success">{{ t('dbms.microservices.yesFile') }}</el-tag>
          </template>
        </template>
      </el-table-column>
      <el-table-column :label="t('dbms.microservices.appServers')" width="90" align="center">
        <template #default="scope">
          {{ scope.row.notStart + scope.row.starting + scope.row.runing }}
        </template>
      </el-table-column>
      <el-table-column
        prop="notStart"
        :label="t('dbms.microservices.notStart')"
        width="80"
        align="center"
      >
        <template #default="scope">
          <el-tag effect="light" type="info">{{ scope.row.notStart }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="starting"
        :label="t('dbms.microservices.starting')"
        width="80"
        align="center"
      >
        <template #default="scope">
          <el-tag effect="light" type="warning">{{ scope.row.starting }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="runing"
        :label="t('dbms.microservices.running')"
        width="80"
        align="center"
      >
        <template #default="scope">
          <el-tag effect="light" type="success">{{ scope.row.runing }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column :label="t('common.operate')" width="90">
        <template #default="scope">
          <el-upload
            :action="uploadUrl"
            accept=".jar"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :on-progress="uploadProgress"
            :headers="uploadHeaders"
            :data="{ appName: scope.row.appName }"
          >
            <el-button type="primary" size="small">{{
              t('dbms.microservices.uploadBtn')
            }}</el-button>
          </el-upload>
        </template>
      </el-table-column>
    </template>
  </WsmTable>
  <WsmForm
    ref="addForm"
    v-model="addData"
    submit-url="/dbms-server/base/app/add"
    :width="600"
    :init-data="initData"
    label-width="100px"
    :title="t('dbms.microservices.addTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-form-item prop="appName" :label="t('dbms.microservices.appName')">
        <el-input v-model="form.appName" :placeholder="t('dbms.microservices.appName')" />
      </el-form-item>
      <el-form-item prop="runIndex" :label="t('dbms.microservices.runIndex')">
        <el-input
          type="number"
          :min="0"
          :max="100000"
          v-model="form.runIndex"
          :placeholder="t('dbms.microservices.runIndex')"
        />
      </el-form-item>
      <el-form-item prop="appNote" :label="t('dbms.microservices.appNote')">
        <el-input v-model="form.appNote" :placeholder="t('dbms.microservices.appNote')" />
      </el-form-item>
    </template>
  </WsmForm>

  <WsmForm
    ref="updateForm"
    v-model="updateData"
    load-url="/dbms-server/base/app/get"
    submit-url="/dbms-server/base/app/update"
    :width="600"
    label-width="100px"
    :title="t('dbms.microservices.updateTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-form-item prop="appName" :label="t('dbms.microservices.appName')">
        <el-input v-model="form.appName" :placeholder="t('dbms.microservices.appName')" />
      </el-form-item>
      <el-form-item prop="runIndex" :label="t('dbms.microservices.runIndex')">
        <el-input
          type="number"
          :min="0"
          :max="100000"
          v-model="form.runIndex"
          :placeholder="t('dbms.microservices.runIndex')"
        />
      </el-form-item>
      <el-form-item prop="appNote" :label="t('dbms.microservices.appNote')">
        <el-input v-model="form.appNote" :placeholder="t('dbms.microservices.appNote')" />
      </el-form-item>
    </template>
  </WsmForm>
  <Config ref="configEl" />

  <WsmForm
    ref="deployForm"
    v-model="addDeployData"
    submit-url="/dbms-server/base/appserver/addApp"
    :width="600"
    :init-data="initDeployData"
    label-width="100px"
    :title="t('dbms.microservices.deployTitle')"
    @success="flushed"
  >
    <template #default="{ form }">
      <el-form-item prop="ip" :label="t('dbms.microservices.ip')">
        <el-select v-model="form.ip" :placeholder="t('dbms.microservices.ip')">
          <el-option
            v-for="item in servers"
            :key="item.ip"
            :label="item.serverName"
            :value="item.ip"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="port" :label="t('dbms.microservices.port')">
        <el-input v-model="form.port" :placeholder="t('dbms.microservices.port')" />
      </el-form-item>
    </template>
  </WsmForm>

  <AppDesign ref="designEl" />
</template>
<script setup lang="ts">
import { WsmTable } from '@/components/WsmTable'
import { WsmForm } from '@/components/WsmForm'
import { QueryFormType, QueryType } from '@/components/WsmTable/src/types'
import { delApi } from '@/api/dbms/microservices'
import { ref } from 'vue'
import { ElLoading, ElMessage, ElMessageBox, UploadProgressEvent } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'
import { FormDataType } from '@/components/WsmForm/src/types'

import Config from './components/microservices/Config.vue'
import { PATH_URL } from '@/axios/service'
import { useUserStoreWithOut } from '@/store/modules/user'
import { listApi } from '@/api/dbms/server'
import AppDesign from './components/AppDesign.vue'

const { t } = useI18n()

const userStore = useUserStoreWithOut()

const uploadUrl = PATH_URL + '/dbms-server/base/app/upload'

const tokenKey: string = userStore.getTokenKey || 'Authorization'

const uploadHeaders = []
uploadHeaders[tokenKey] = userStore.getToken
//表格对象
const table = ref()

//新增表单对象
const addForm = ref()
const initData = ref({
  appType: 1,
  runIndex: 0
})
const addData: FormDataType = {
  appName: '',
  appNote: '',
  appType: 1,
  runIndex: 0
}

//修改表单对象
const updateForm = ref()
const updateData: FormDataType = {
  appName: '',
  appNote: '',
  appType: 1,
  runIndex: 0
}

const queryFormType: QueryFormType = {
  appName: {
    value: '',
    queryType: QueryType.LIKE
  },
  appType: {
    value: '',
    queryType: QueryType.EQ
  }
}

const update = (appName: string) => {
  updateForm.value.show({ appName })
}

const configEl = ref()

const config = (appName: string) => {
  configEl.value.show(appName)
}
const del = async (appName: string) => {
  ElMessageBox.confirm(t('common.delMessage'), t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  }).then(async () => {
    const rs = await delApi(appName)
    if (rs.success) {
      table.value.load(1)
    }
  })
}

const uploadLoading = ref()

const beforeUpload = () => {
  uploadLoading.value = ElLoading.service({
    lock: true,
    text: t('common.uploadloading'),
    background: 'rgba(0, 0, 0, 0.7)'
  })
}

const uploadSuccess = (rs: any) => {
  if (rs.success) {
    ElMessage.success(rs.message)
    table.value.load()
  } else {
    ElMessage.error(rs.message)
  }
  uploadLoading.value.close()
}

const uploadError = (rs: any) => {
  if (rs.success) {
    ElMessage.success(rs.message)
  } else {
    ElMessage.error(rs.message)
  }
  uploadLoading.value.close()
}

const uploadProgress = (_evt: UploadProgressEvent) => {}

const servers = ref()
const loadServers = async () => {
  const rs = await listApi()
  if (rs.success) {
    servers.value = rs.data
  }
}
loadServers()

const deployForm = ref()

const initDeployData = ref({
  ip: '',
  appName: '',
  port: 0
})
const addDeployData: FormDataType = {
  ip: '',
  appName: '',
  port: 0
}

const addMicroservice = (appName: string) => {
  initDeployData.value.appName = appName
  deployForm.value.show()
}

const designEl = ref()
const design = (appName: string) => {
  designEl.value.show(appName)
}

const flushed = () => {
  table.value.load(1)
}
</script>

<style scoped></style>
